{% extends 'home.html' %}
{% block content-title %}
    <title>书籍管理</title>
{% endblock %}
{% block content_main %}
    <style>
        td, th {
            vertical-align: middle !important;
            text-align: center;
        }

        .img_book {
            height: 70px;
        }

        .text_center {
            text-align: center;
        }
    </style>
    <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">书籍管理</div>
        <!-- Table -->
        <table class="table table-hover table-bordered" id="main_content">
            <thead>
            <tr>
                <th>序号</th>
                <th>书籍封面</th>
                <th>书籍</th>
                <th>作者</th>
                <th>简介</th>
                <th>出版社</th>
                <th>出版日期</th>
                <th>价格(元)</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for book_obj in book_data %}
                <tr>
                    <th>{{ forloop.counter }}</th>
                    <th>
                        <img class="img_book" src="{{ book_obj.image }}" alt="{{ book_obj.name }}"
                             title="{{ book_obj.name }}">
                    </th>
                    <th style="width: 150px">《{{ book_obj.name }}》</th>
                    <th>
                        {% for author_data in book_obj.author.all %}
                            {% if forloop.last %}
                                {{ author_data.name }}
                            {% else %}
                                {{ author_data.name }}<br>
                            {% endif %}
                        {% endfor %}

                    </th>
                    <th style="font-size: 12px;width: 150px;text-align: left">
                        {{ book_obj.desc|truncatechars:15 }}
                    </th>
                    <th>{{ book_obj.publish.name }}</th>
                    <th>{{ book_obj.register_date|date:"Y/m/d" }}</th>
                    <th>{{ book_obj.price }}</th>
                    <th>
                        <div class="btn-group" role="group">
                            <a href="{% url 'book:renew' book_obj.id %}" type="button"
                               class="btn btn-warning">修改</a>
                            <button class="btn btn-danger btn_del_book" value="{{ book_obj.id }}">删除</button>
                        </div>
                    </th>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div class="panel-body">
            <a href="{% url 'book:add' %}" type="button" class="btn btn-primary">添加书籍</a>
            <div class="text_center">{{ page_html|safe }}</div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            {#事件委托:防止在局部刷新界面后，页面元素无法正确执行函数#}
            $('#main_content').on('click', '.btn_del_book', function () {
                {#获取到需要删除的书籍的bid#}
                let bid = $(this).attr('value')
                {#设置弹窗#}
                Swal.fire({
                    title: "确定删除?",
                    text: "删除后就没有后悔的机会了!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "删除",
                    {#掏出弹窗结束以后执行操作,否则在跳出弹窗后可能会不等待确认直接执行操作#}
                }).then((result) => {
                    {#点击确认操作后执行的动作#}
                    if (result.isConfirmed) {
                        {#通过ajax向后端发送数据#}
                        $.ajax({
                            {#反向解析url#}
                            url: '{% url 'book:del' %}',
                            type: 'post',
                            {#通过json数据格式将需要删除的bid床给后端#}
                            contentType: 'application/json',
                            data: JSON.stringify({'bid': bid}),
                            success: function () {
                                Swal.fire("删除成功!", "", "success").then(() => {
                                    // 在用户确认后刷新页面
                                    {#location.reload();#}
                                    $('#main_content').load(location.href + ' #main_content');
                                });
                            },
                            error:function (res) {
                                Swal.fire("删除失败!"+res.error, "", "error")
                            }
                        });
                    }
                });
            })
        })
    </script>
{% endblock %}